import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hxdj/common/components/my_countdown_button.dart';
import 'package:hxdj/common/my_header_global.dart';
import 'package:hxdj/mine/cancel_account/cancel_account_viewmodel.dart';

class CancelAccountPage extends StatefulWidget {
  static String routeName = "/cancelAccountPage";

  const CancelAccountPage({super.key});

  @override
  State<CancelAccountPage> createState() => _CancelAccountPageState();
}

class _CancelAccountPageState extends State<CancelAccountPage> {
  //viewModel
  CancelAccountViewModel? viewModel;

  //手机号
  TextEditingController phoneNumberController = TextEditingController();

  //验证码
  TextEditingController codeController = TextEditingController();

  @override
  void initState() {
    super.initState();
  }

  //消除代码
  void _clearText() {
    codeController.clear();
    debugPrint("清除验证码");
  }

  @override
  Widget build(BuildContext context) {
    return BasePage<CancelAccountViewModel>(
      onModelReady: (model) {
        viewModel = model;
        // 页面初始化完成后的回调
        // model.cancelAccount();
      },
      viewModel: CancelAccountViewModel(),
      builder: (BuildContext context, CancelAccountViewModel? model, Widget? child) {
        Widget bodyWidget = _buildInput();
        switch (model?.setup) {
          case 0:
            {
              bodyWidget = _buildDescribe(model);
            }

          default:
            bodyWidget = _buildInput();
        }

        return Scaffold(
            backgroundColor: Colors.white,
            appBar: const MyAppBar(
              title: '注销账号',
            ),
            body: bodyWidget);
      },
    );
  }

  //注销账号说明描述
  _buildDescribe(CancelAccountViewModel? model) {
    return Container(
        color: MyColours.bgColor,
        child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
          //注销账号说明
          Container(
            color: Colors.white,
            margin: EdgeInsets.only(top: 0, bottom: 35.h),
            alignment: Alignment.center,
            child: Column(
              children: [
                MyImage(imageName: "ic_cancel_account", width: 60.w),
                Padding(
                  padding: EdgeInsets.all(18.0.w),
                  child: Text("账户注销，将永久失去账号及以下权益：",
                      style: TextStyle(fontSize: 14.sp, color: Colors.black, fontWeight: FontWeight.w700)),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 18.w, right: 18.w, top: 10.h, bottom: 30.h),
                  child: Text("1、无法使用改账号登录欢心到家平台；\n2、账号信息将被清空且无法恢复；\n3、放弃已开通的会员权益。",
                      style: TextStyle(fontSize: 13.sp, color: Colors.black, height: 2.0)),
                )
              ],
            ),
          ),

          const Spacer(),
          GestureDetector(
            onTap: () {
              model!.setSetup(1);
            },
            child: SafeArea(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 15.w),
                child: Container(
                  padding: EdgeInsets.symmetric(vertical: 18.w),
                  decoration: BoxDecoration(
                    color: MyColours.appMain,
                    //设置四周圆角 角度
                    borderRadius: BorderRadius.circular(30.w),
                  ),
                  alignment: Alignment.center,
                  child: Text("已清楚所有风险，确认注销",
                      style: TextStyle(fontSize: 15.sp, color: Colors.white, fontWeight: FontWeight.w700)),
                ),
              ),
            ),
          ),
        ]));
  }

  //注销账号输入框
  _buildInput() {
    return GestureDetector(
      onTap: () {
        //失去焦点
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Container(
          color: Colors.white,
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            //手机号验证
            Container(
                padding: const EdgeInsets.only(left: 20, top: 20),
                child: const Text("手机号验证",
                    style: TextStyle(fontSize: 18, color: Colors.black, fontWeight: FontWeight.w700))),

            //手机号输入框
            Container(
                margin: const EdgeInsets.symmetric(horizontal: 20),
                padding: const EdgeInsets.only(top: 20),
                decoration: const BoxDecoration(
                    border: Border(
                  bottom: BorderSide(color: MyColours.colorE1E1E1, width: 1),
                )),
                child: TextField(
                  controller: phoneNumberController,
                  inputFormatters: [LengthLimitingTextInputFormatter(11), FilteringTextInputFormatter.digitsOnly],
                  decoration: const InputDecoration(
                    hintText: '请输入手机号',
                    border: InputBorder.none, // 隐藏下划线
                    contentPadding: EdgeInsets.fromLTRB(0, 10.0, 10.0, 12.0), // 内容内边距
                  ),
                  keyboardType: TextInputType.phone, // 设置为手机号键盘
                )),

            //验证码输入框
            Container(
                margin: const EdgeInsets.symmetric(horizontal: 20),
                padding: const EdgeInsets.only(top: 20),
                decoration: const BoxDecoration(
                    border: Border(
                  bottom: BorderSide(color: MyColours.colorE1E1E1, width: 1),
                )),
                child: Row(
                  children: [
                    Expanded(
                        child: TextField(
                      controller: codeController,
                      decoration: InputDecoration(
                        hintText: '请输入验证码',
                        border: InputBorder.none, // 隐藏下划线
                        contentPadding: EdgeInsets.fromLTRB(0, 10.0.h, 10.0.w, 12.0.h), // 内容内边距

                        suffixIcon: IconButton(
                          icon: const Icon(Icons.clear), // 使用Flutter提供的图标或自定义图标
                          iconSize: 20.0, // 设置图标大小
                          onPressed: codeController.text.isNotEmpty ? _clearText : null, // 如果输入框非空则显示清除按钮并响应点击事件
                        ),
                      ),

                      keyboardType: TextInputType.phone, // 设置为手机号键盘
                    )),
                    Container(
                        width: 100.w,
                        alignment: Alignment.centerRight,
                        decoration: const BoxDecoration(
                            border: Border(
                          left: BorderSide(color: MyColours.colorE1E1E1, width: 1),
                        )),
                        child: MyCountdownButton(
                          countdown: 60,
                          textController: phoneNumberController,
                          mode: MyCountdownMode.normal,
                          key: GlobalKey(debugLabel: DateTime.now().microsecondsSinceEpoch.toString()),
                          onOver: () {
                            viewModel?.setIsGetSmsCode(false);
                          },
                          onStart: () {
                            //去获取验证码
                            viewModel?.updateSmsVerificationCode(phoneNumberController.text);
                          },
                          textStyle: MyTextStyles.textMain14,
                          countingTextStyle: MyTextStyles.textDarkGray14,
                          isStartDown: viewModel!.isGetSmsCode,
                        )),
                  ],
                )),
            //确定注销

            GestureDetector(
              onTap: () {
                viewModel?.cancelAccount();
               
              },
              child: Container(
                margin: const EdgeInsets.only(top: 70),
                alignment: Alignment.center,
                child: MyBorder(
                  radius: 30,
                  backgroundColor: MyColours.appMain,
                  child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 100, vertical: 18),
                      child: const Text("确定", style: TextStyle(fontSize: 15, color: Colors.white))),
                ),
              ),
            ),
          ])),
    );
  }
}
